<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link id="theme" rel="stylesheet" href="css/themes/light.css"/>
    <title>Universe Shrinker</title>
    <meta name="description" content="Shrink multiple Layers of Universes and discover the Heat Death."/>
    <meta name="og:title" content="Universe Shrinker"/>
    <meta name="og:description" content="Shrink multiple Layers of Universes and discover the Heat Death."/>
</head>
<body>
<div id="app">
    <main v-if="!gameWon">
        <div class="universe-navigation">
            <div><button @click="decreaseUniverseLevel()" v-if="currentUniverseLevel > 0">←</button></div>
            <universe ref="universe" :universe="universe"></universe>
            <div><button @click="increaseUniverseLevel()" v-if="currentUniverseLevel < highestUniverseLevel">→</button></div>
        </div>
        <p>You have <span class="big">{{formatNumber(rhoParticles, 2, 0, 1e9)}}</span> Rho-Particles (&rho;<sub>p</sub>)</p>
        <p>You get <span class="big">{{formatNumber(getRhoProduction(), 2, 0, 1e9)}}</span> &rho;<sub>p</sub> per Second</p>
        <tab-navigation ref="tabNavigation"></tab-navigation>
        <div v-if="settings.tab === 'shrinkers'">
            <shrinker-table :shrinkers="shrinkers"></shrinker-table>
        </div>
        <div v-if="settings.tab === 'rhoupgrades'">
            <upgrade-container :upgrades="rhoUpgrades"></upgrade-container>
        </div>
        <div v-if="settings.tab === 'universelayers'">
            <universe-layer-navigation ref="universeLayers" :layers="universeLayers"></universe-layer-navigation>
        </div>
        <div v-if="settings.tab === 'theta'">
            <theta-layer ref="thetaLayer"></theta-layer>
        </div>
        <div v-if="settings.tab === 'auto'">
            <automator-container :automators="automators"></automator-container>
        </div>
        <div v-if="settings.tab === 'options'">
            <notation-select></notation-select>
            <theme-select></theme-select>
            <div class="option" v-if="resources['Multiverse']">
                <label>
                    <input type="checkbox" v-model="settings.maxAllLayers"/> <span>Max All Universe Layers instead of the current selected</span>
                </label>
            </div>
            <div class="option" v-if="thetaUpgrades.maxAllUnify.level > 0">
                <label>
                    <input type="checkbox" v-model="settings.maxAllTabs"/> <span>Max All Tabs instead of just One</span>
                </label>
            </div>
            <div class="saving">
                <button @click="saveGame()">Save Game</button>
                <p>The Game saves automatically every 30 seconds, but you can save manually to go really sure.</p>
            </div>
            <div class="export">
                <div class="buttons">
                    <button @click="exportGame()">Export</button>
                    <button @click="loadGame(settings.exportString)">Import (from Text Field)</button>
                </div>
                <textarea v-model="settings.exportString" rows="16" cols="64">{{settings.exportString}}</textarea>
            </div>
            <div class="hard-reset">
                <button @click="hardReset()">HARD RESET</button>
            </div>
        </div>
    </main>
    <main v-else class="won">
        <h3>Congratulations, YOU WON!</h3>
        <p>You Shrunk everything there is, and you caused the Heat Death of every atom, ultimatively leaving you with nothing left.
        I hope you had fun playing :)<br/>This is a submission for the 7 day Incremental Game Jam 2020</p>
        <p>You beat the Game in {{formatTime(timeSpent)}}. Feel free to compare this with others. Who was the fastest?</p>
        <p>If you want to play again, you can start over: <button @click="hardReset()">HARD RESET</button></p>
    </main>
    <footer>
        <a target="_blank" href="https://discord.gg/75d7Jj5">Discord</a>
        <a target="_blank" href="https://www.cook1eegames.feedia.co">Homepage</a>
    </footer>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/break_infinity.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@antimatter-dimensions/notations@1.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="js/classes/universe.js"></script>
<script src="js/classes/shrinker.js"></script>
<script src="js/classes/upgrade.js"></script>
<script src="js/classes/automator.js"></script>
<script src="js/classes/universeresource.js"></script>
<script src="js/classes/universelayer.js"></script>

<script src="js/components/universe.js"></script>
<script src="js/components/shrinker.js"></script>
<script src="js/components/shrinker-table.js"></script>
<script src="js/components/upgrade.js"></script>
<script src="js/components/upgrade-container.js"></script>
<script src="js/components/universe-layer.js"></script>
<script src="js/components/universe-layer-navigation.js"></script>
<script src="js/components/theta-layer.js"></script>
<script src="js/components/automator.js"></script>
<script src="js/components/automator-container.js"></script>
<script src="js/components/tab-navigation.js"></script>
<script src="js/components/notation-select.js"></script>
<script src="js/components/theme-select.js"></script>

<script src="js/data/functions.js"></script>
<script src="js/data/computed.js"></script>
<script src="js/data/game.js"></script>

<script src="js/main.js"></script>
</body>
</html>